<template>
   <div>
        <!-- 面包屑 -->
        <breadcrumb first='商品管理' second='商品列表'/>
        <!-- 卡片 -->
        <el-card class="box-card">
        <!-- 添加和搜索 -->
          <div>
            <!-- 搜索模块 -->
            <div style="margin-top: 15px; width:500px;display:inline-block">
              <el-input
                placeholder="请输入内容"
                v-model.trim="goodsObj.query"
                clearable
                class="input-with-select"
                @cleat="search()">
                <el-button @click="search()" slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
            <!-- 搜索模块完 -->
            &nbsp;
            <!-- 添加商品 -->
            <el-button type="primary" @click="$router.push('/add')">添加商品</el-button>
            <!-- 添加商品完 -->
          </div>
          <br>
        <!-- 添加和搜索完 -->

          <!-- 表格 -->
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              label="#"
              type="index"
              align="center"
              width="50">
            </el-table-column>
            <el-table-column
              prop="goods_name"
              label="商品名称">
            </el-table-column>
            <el-table-column
              label="商品价格（元）"
              prop="goods_price"
              width="120">
            </el-table-column>
            <el-table-column
              label="商品重量"
              prop="goods_weight"
              width="110">
            </el-table-column>
            <el-table-column
              label="创建时间"
              width="160">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.add_time | capitalize }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.$index, scope.row)"></el-button>
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 表格完 -->

          <!-- 页码 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="goodsObj.pagenum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="goodsObj.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
          <!-- 页码 -->
        </el-card>
   </div>
</template>
<script>
import moment from 'moment'
import { commodityApi } from '@/api'
export default {
  created () {
    this.commodityApiFn()
  },
  data () {
    return {
      tableData: [], // 表格数据
      // 查询参数
      goodsObj: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      total: 0
    }
  },
  methods: {
    async commodityApiFn () {
      const res = await commodityApi(this.goodsObj)
      this.tableData = res.data.data.goods
      this.total = res.data.data.total
    },
    handleEdit (index, row) { // 表格操作中的编辑
      console.log(index, row)
    },
    handleDelete (index, row) { // 表格操作中的删除
      console.log(index, row)
    },
    // 分页
    handleSizeChange (val) { // 每页 多少 条
      this.goodsObj.pagesize = val
      console.log(`每页 ${val} 条`)
      this.commodityApiFn()
    },
    handleCurrentChange (val) { // 那一页
      this.goodsObj.pagenum = val
      this.commodityApiFn()
    },
    // 分页
    search () {
      this.commodityApiFn()
    }
  },
  filters: {
    capitalize (tame) {
      return moment(tame).format('YYYY-MM-DD hh:mm:ss')
    }
  }
}
</script>
<style scoped>
</style>
